<template>
<div class="main">

  <h2 class="discre" v-if="!toVisable">登录尽享更多功能</h2>
  <div class="loginsuccess">
    <el-container v-if="toVisable">
      <el-aside width="300px">
        <div class="img" :style="{ backgroundImage: `url(${my.img})` }"></div>
        <div class="name" v-text="my.name"></div>
        <el-button type="info" @click.once="upload=!upload"><i class="el-icon-edit"></i>修改个人信息</el-button>


        <div style="margin: 20px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" ref="formLabelAlign" v-if="upload">
          <el-form-item label="头像地址">
            <el-input v-model="formLabelAlign.url"></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="formLabelAlign.pass" type="password"></el-input>
          </el-form-item>
          <el-button type="primary" @click.prevent="submitUpdate('formLabelAlign')">立即更新</el-button>
        </el-form>
        </el-aside>
      <el-container>
        <el-header><el-tag class="mytag" effect="plain" @click="showTable" >我 喜 欢</el-tag></el-header>
        <el-main>

          <ul class="table">
            <li v-for="tab in values" class="lis" @click="addv(tab)">
              <div :style="{ backgroundImage: `url(${tab.cover})` }" class="imgl"></div>
              <div class="text">{{tab.name}}</div>
              <div class="text tex2">{{tab.artist}}</div>
            </li>
          </ul>

        </el-main>
        <el-footer></el-footer>
      </el-container>

    </el-container>

  </div>
  <div class="buttone">
  <el-button type="primary"  class="mebuton" @click.prevent="dialogFormVisible = true" v-if="!toVisable">登录</el-button>
<!--    登录表单-->
    <el-dialog title="登录" :visible.sync="dialogFormVisible" center>

      <!-- 插入测试 -->
      <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">

        <el-form-item label="账号" prop="num">
          <el-input v-model.number="ruleForm2.num"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="记住密码" prop="delivery">
          <el-switch v-model="ruleForm2.delivery"></el-switch>
        </el-form-item>

      </el-form>
      <!-- 插入测试 -->

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false; resetForm('ruleForm2')">取 消</el-button>
        <el-button type="primary" @click.prevent="submitForm('ruleForm2')">登 录</el-button>
      </div>
    </el-dialog>





    <el-button type="primary"  class="mebuton" @click.prevent="dialogFormVisible1 = true" v-if="!toVisable" >注册</el-button>

<!--    注册表单-->
    <el-dialog title="注册" :visible.sync="dialogFormVisible1" center>

      <!-- 插入测试 -->
      <el-form :model="ruleForm1" status-icon :rules="rules1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">

        <el-form-item label="手机号" prop="num">
          <el-input v-model.number="ruleForm1.num"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm1.pass" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="记住密码" prop="delivery">
          <el-switch v-model="ruleForm1.delivery"></el-switch>
        </el-form-item>

      </el-form>
      <!-- 插入测试 -->

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false; resetForm('ruleForm1')">取 消</el-button>
        <el-button type="primary" @click.prevent="submitForm('ruleForm1')">注  册</el-button>
      </div>
    </el-dialog>



  </div>
</div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'

export default {

  name: "Melogin",

  data() {
    /*插入form方法*/
    let flag =false;
    var checkNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
          if (!myreg.test(value) ) {
            callback(new Error('请输入正确的手机号码'));
          } else {
            callback();
          }

        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {

        callback();
      }
    };
    /*插入form方法*/

    return {
      values:{

      },
      labelPosition: 'right',
      formLabelAlign: {
        url: '',
        name: '',
        pass: ''
      },
      loginPower:false,
      /*插入form方法*/
      /*设定规则指向*/
      ruleForm2: {
        pass: '',
        num: '',
        delivery: false,
      },
      ruleForm1: {
        pass: '',
        num: '',
        delivery: false,
      },

      rules2: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],

        num: [
          { validator: checkNum, trigger: 'blur' }
        ]
      },
      rules1: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],

        num: [
          { validator: checkNum, trigger: 'blur' }
        ]
      },
      upload:false,

      /*插入form方法*/
      toVisable: this.$store.getters.getLoginData.login,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogTableVisible1: false,
      dialogFormVisible1: false,
      form: {
        name: '',
        type: [],
        resource: '',
        desc: ''
      },
      my:{
        img:'',
        name:'',
      },
      formLabelWidth: '120px'
    };
  },
  watch:{
    getLoginData:function (z){
      this.toVisable=JSON.parse(sessionStorage.getItem("login")).login
      this.my.img=JSON.parse(sessionStorage.getItem("login")).img
      this.my.name=JSON.parse(sessionStorage.getItem("login")).name
    }

  },
  computed:{
    ...mapGetters(['getLoginData'])
  },
  created() {
    this.toVisable=JSON.parse(sessionStorage.getItem("login")).login
    this.my.img=JSON.parse(sessionStorage.getItem("login")).img
    this.my.name=JSON.parse(sessionStorage.getItem("login")).name
  },
  methods: {
    showTable(){
      let _this = this;
      axios.get('http://localhost:8181/get/likes/'+JSON.parse(sessionStorage.getItem("login")).id).then(function (resp){
        _this.values=resp.data
        console.log(resp)
      })
    },
    addv(tab) {
      this.$store.commit('setLikeData',tab);
    },
    tpUpload(){
      this.upload=true;
    },
    submitUpdate(formName){
      this.$refs[formName].validate((valid)=>{
        if (valid){
          //提交成功的动作
          let _this=this;
          axios.get('http://localhost:8181/update?id='+JSON.parse(sessionStorage.getItem("login")).id+'&url='+encodeURIComponent(_this.formLabelAlign.url)+'&name='+
          _this.formLabelAlign.name+'&pass='+_this.formLabelAlign.pass).then(function (resp){
            console.log(resp.data)
            _this.$store.commit('setLoginData',resp.data)
            _this.$store.state.loginData.login=true
            sessionStorage.setItem("login",JSON.stringify(_this.$store.getters.getLoginData));
            _this.my=_this.$store.getters.getLoginData;
            _this.$message({
              type: 'success',
              message: '提交成功'
            });
          })
          this.upload=!this.upload;
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //提交成功做的动作
          if (formName==='ruleForm1'){
            console.log(this.ruleForm1+"注册")
            let _this=this;
            axios.get('http://localhost:8181/register/'+_this.ruleForm1.num+'/'+_this.ruleForm1.pass).then(function (resp){
              console.log(resp)
              if (resp.data===null||resp.data===''){
                _this.$message({
                  type: 'error',
                  message: '账号已存在'
                });
              }else {
                _this.$message({
                  type: 'success',
                  message: '提交成功'
                });

                _this.$store.commit('setLoginData',resp.data)
                _this.$store.state.loginData.login=true
                sessionStorage.setItem("login",JSON.stringify(_this.$store.getters.getLoginData));
                _this.my=_this.$store.getters.getLoginData;

                console.log(_this.my)
              }
            })
          }else {
            let _this=this;
            axios.get('http://localhost:8181/login/'+_this.ruleForm2.num+'/'+_this.ruleForm2.pass).then(function (resp){
              console.log(resp+"登录")
              if (resp.data===null||resp.data==='') {
                _this.$message({
                  type: 'error',
                  message: '账号或密码错误'
                });
              }else {
                _this.$message({
                  type: 'success',
                  message: '登录成功'
                });
                _this.$store.commit('setLoginData',resp.data)
                _this.$store.state.loginData.login=true
                console.log(resp.data)
                _this.my.img=_this.$store.getters.getLoginData.img
                _this.my.name=_this.$store.getters.getLoginData.name
                sessionStorage.setItem("login",JSON.stringify(_this.$store.getters.getLoginData));
              }
            })
          }
          console.log(this.$store.getters.getLoginData)
          console.log(this.my)
         this.dialogFormVisible = false;
         this.dialogFormVisible1 = false;
          /* alert('submit!') ; */
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}

</script>

<style scoped>
.mytag{
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  width: 70px;
  height: 40px;
}
.main{
  max-width: 1024px;
  width: 1024px;
  box-sizing: border-box;
  display: block;
}
.buttone{
  display: flex;
  justify-content: space-evenly;
  box-sizing: border-box;
  width: 1024px;
  height: 100px;
  bottom: 50px;
}
.mebuton{
  width: 128px;
  height: 40px;
}
.discre{
  display: block;
  margin-top: 30px;
  margin-bottom: 50px;
  font-size: 13px;
  color: #9b9b9b;
}
.loginsuccess{
  box-sizing: border-box;
}
.img{
  margin: 0 auto;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 15px;
  background-repeat: no-repeat;
  background-size: cover;
}
.name{
  height: 20px;
  display: block;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
}
.el-aside{
  display: block;
  box-sizing: border-box;
  height: 400px;
}
.el-header, .el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: left;
  line-height: 60px;
}

ul{
  display: block;
}
li{
  border-radius: 5px;
  display: block;
}
li:hover{
  background: linear-gradient(91deg,#f1eefc,#9dc6ff 70%,#a5bcff);
}

.imgl{

  width: 42px;
  height: 42px;
  background-size: cover;
}
.lis{
  width: 100%;
  display: flex;
  height: 45px;
  border-bottom: 1px solid #eaeaea;
}

.tex2{
  font-weight: 400;
  color: #64646c;
  font-size: 10px;
  margin-top: 20px;
}
.text{
  margin-top: 15px;
  margin-left: 10px;
}
* {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,PingFang SC,Source Han Sans CN,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: default;
  font-weight: 400;
}

</style>